<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>活动方案建议 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(to bottom, #fce4ec 0%, #fff3e0 100%);
            color: #ff6b00;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 8px rgba(255,107,0,0.2);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        /* 搜索栏 */
        .search-bar {
            background: white;
            margin: 15px;
            border-radius: 20px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .search-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }
        
        .search-btn {
            color: #ff6b00;
            font-size: 16px;
            cursor: pointer;
        }
        
        /* 筛选栏 */
        .filter-bar {
            background: white;
            margin: 0 15px 15px;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .filter-title {
            font-size: 14px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        .filter-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-tag {
            padding: 6px 12px;
            border-radius: 15px;
            background: #f0f2f5;
            font-size: 12px;
            color: #666;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .filter-tag.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        /* 提交建议按钮 */
        .submit-suggestion-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 20px;
            font-size: 14px;
            cursor: pointer;
            margin: 0 15px 15px;
            transition: all 0.3s;
            width: calc(100% - 30px);
        }
        
        .submit-suggestion-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(255, 107, 0, 0.3);
        }
        
        /* 建议列表 */
        .suggestions-list {
            margin: 0 15px;
        }
        
        .suggestion-item {
            background: white;
            margin-bottom: 15px;
            border-radius: 12px;
            padding: 15px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
            position: relative;
            border-left: 4px solid #ff6b00;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .suggestion-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(255, 107, 0, 0.15);
        }
        
        .suggestion-header {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        
        .suggestion-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 16px;
            margin-right: 10px;
        }
        
        .suggestion-info {
            flex: 1;
        }
        
        .suggestion-author {
            font-size: 14px;
            font-weight: bold;
            color: #333;
        }
        
        .suggestion-time {
            font-size: 12px;
            color: #999;
        }
        
        .suggestion-tag {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: bold;
        }
        
        .suggestion-tag.hot {
            background: linear-gradient(135deg, #ff6b6b, #ff4757);
        }
        
        .suggestion-tag.env {
            background: linear-gradient(135deg, #2ed573, #7bed9f);
        }
        
        .suggestion-tag.culture {
            background: linear-gradient(135deg, #5352ed, #3742fa);
        }
        
        .suggestion-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
        }
        
        .suggestion-content {
            font-size: 14px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 10px;
        }
        
        .suggestion-actions {
            display: flex;
            align-items: center;
            gap: 15px;
            font-size: 12px;
            color: #999;
        }
        
        .suggestion-action {
            display: flex;
            align-items: center;
            gap: 3px;
            cursor: pointer;
            transition: color 0.3s;
        }
        
        .suggestion-action:hover {
            color: #ff6b00;
        }
        
        .suggestion-status {
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: bold;
        }
        
        .status-approved {
            background: #d4edda;
            color: #155724;
        }
        
        .status-pending {
            background: #fff3cd;
            color: #856404;
        }
        
        .status-reviewing {
            background: #d1ecf1;
            color: #0c5460;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">活动方案建议</span>
        </div>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
        <span class="search-icon">🔍</span>
        <input type="text" class="search-input" placeholder="搜索建议标题或内容">
        <span class="search-btn">搜索</span>
    </div>
    
    <!-- 筛选栏 -->
    <div class="filter-bar">
        <div class="filter-title">🏷️ 建议分类</div>
        <div class="filter-tags">
            <span class="filter-tag active">全部</span>
            <span class="filter-tag">热门建议</span>
            <span class="filter-tag">文化活动</span>
            <span class="filter-tag">环保主题</span>
            <span class="filter-tag">体育健身</span>
            <span class="filter-tag">志愿服务</span>
            <span class="filter-tag">已采纳</span>
        </div>
    </div>
    
    <!-- 提交建议按钮 -->
    <button class="submit-suggestion-btn" onclick="submitSuggestion()">💡 提交我的方案</button>
    
    <!-- 建议列表 -->
    <div class="suggestions-list">
        <div class="suggestion-item" onclick="viewSuggestion(1)">
            <div class="suggestion-header">
                <div class="suggestion-icon">💡</div>
                <div class="suggestion-info">
                    <div class="suggestion-author">王老师</div>
                    <div class="suggestion-time">1小时前</div>
                </div>
                <span class="suggestion-tag hot">热门建议</span>
            </div>
            <div class="suggestion-title">社区文化节活动方案</div>
            <div class="suggestion-content">
                建议举办一场为期三天的社区文化节，包括传统文化展示、手工艺制作体验、社区才艺表演等环节。可以邀请社区老人分享传统技艺，增进不同年龄段居民的交流，营造浓厚的文化氛围...
            </div>
            <div class="suggestion-actions">
                <div class="suggestion-action">
                    <span>👍</span>
                    <span>32</span>
                </div>
                <div class="suggestion-action">
                    <span>💬</span>
                    <span>18</span>
                </div>
                <span class="suggestion-status status-approved">已采纳</span>
            </div>
        </div>
        
        <div class="suggestion-item" onclick="viewSuggestion(2)">
            <div class="suggestion-header">
                <div class="suggestion-icon">🌱</div>
                <div class="suggestion-info">
                    <div class="suggestion-author">绿色志愿者小组</div>
                    <div class="suggestion-time">3小时前</div>
                </div>
                <span class="suggestion-tag env">环保主题</span>
            </div>
            <div class="suggestion-title">社区绿化美化行动</div>
            <div class="suggestion-content">
                提议组织"美丽家园共建"活动，包括垃圾分类宣传、绿植种植、环保知识讲座等。让居民参与到社区环境改善中来，培养环保意识，共同打造绿色宜居的社区环境...
            </div>
            <div class="suggestion-actions">
                <div class="suggestion-action">
                    <span>👍</span>
                    <span>28</span>
                </div>
                <div class="suggestion-action">
                    <span>💬</span>
                    <span>12</span>
                </div>
                <span class="suggestion-status status-reviewing">审核中</span>
            </div>
        </div>
        
        <div class="suggestion-item" onclick="viewSuggestion(3)">
            <div class="suggestion-header">
                <div class="suggestion-icon">🏃</div>
                <div class="suggestion-info">
                    <div class="suggestion-author">体育爱好者协会</div>
                    <div class="suggestion-time">6小时前</div>
                </div>
                <span class="suggestion-tag">体育健身</span>
            </div>
            <div class="suggestion-title">社区健康跑活动</div>
            <div class="suggestion-content">
                建议每周举办社区健康跑活动，设置不同距离路线，满足各年龄段居民需求。可以设立打卡点、健康知识宣传点，鼓励全民参与健身运动，提升社区整体健康水平...
            </div>
            <div class="suggestion-actions">
                <div class="suggestion-action">
                    <span>👍</span>
                    <span>25</span>
                </div>
                <div class="suggestion-action">
                    <span>💬</span>
                    <span>8</span>
                </div>
                <span class="suggestion-status status-pending">待审核</span>
            </div>
        </div>
        
        <div class="suggestion-item" onclick="viewSuggestion(4)">
            <div class="suggestion-header">
                <div class="suggestion-icon">🎭</div>
                <div class="suggestion-info">
                    <div class="suggestion-author">文艺爱好者</div>
                    <div class="suggestion-time">1天前</div>
                </div>
                <span class="suggestion-tag culture">文化活动</span>
            </div>
            <div class="suggestion-title">社区艺术节策划方案</div>
            <div class="suggestion-content">
                提议举办社区艺术节，包括书法绘画展览、音乐舞蹈表演、摄影作品展示等。为社区居民提供展示才艺的平台，丰富文化生活，增强社区凝聚力和文化自信...
            </div>
            <div class="suggestion-actions">
                <div class="suggestion-action">
                    <span>👍</span>
                    <span>22</span>
                </div>
                <div class="suggestion-action">
                    <span>💬</span>
                    <span>15</span>
                </div>
                <span class="suggestion-status status-reviewing">审核中</span>
            </div>
        </div>
        
        <div class="suggestion-item" onclick="viewSuggestion(5)">
            <div class="suggestion-header">
                <div class="suggestion-icon">👴</div>
                <div class="suggestion-info">
                    <div class="suggestion-author">敬老志愿队</div>
                    <div class="suggestion-time">2天前</div>
                </div>
                <span class="suggestion-tag">志愿服务</span>
            </div>
            <div class="suggestion-title">关爱独居老人志愿服务</div>
            <div class="suggestion-content">
                建议建立关爱独居老人的定期志愿服务机制，包括生活照料、健康关怀、精神慰藉等。组织志愿者定期上门探访，为老人提供必要的帮助和陪伴，让他们感受到社区的温暖...
            </div>
            <div class="suggestion-actions">
                <div class="suggestion-action">
                    <span>👍</span>
                    <span>35</span>
                </div>
                <div class="suggestion-action">
                    <span>💬</span>
                    <span>20</span>
                </div>
                <span class="suggestion-status status-approved">已采纳</span>
            </div>
        </div>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item" onclick="location.href='profile.html'">
            <div class="nav-icon">👤</div>
            <div class="nav-label">我的</div>
        </div>
    </div>
    
    <script>
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 筛选标签点击
        document.querySelectorAll('.filter-tag').forEach(tag => {
            tag.addEventListener('click', function() {
                document.querySelectorAll('.filter-tag').forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 查看建议详情
        function viewSuggestion(id) {
            alert('查看建议详情\n建议ID: ' + id + '\n\n功能开发中...');
        }
        
        // 提交活动方案建议
        function submitSuggestion() {
            alert('📝 提交活动方案\n\n请填写以下信息：\n• 活动主题\n• 活动内容描述\n• 预期参与人数\n• 所需资源\n• 建议时间\n• 联系方式\n\n功能开发中...');
        }
        
        // 搜索功能
        document.querySelector('.search-btn').addEventListener('click', function() {
            const keyword = document.querySelector('.search-input').value;
            if (keyword.trim()) {
                alert('搜索关键词: ' + keyword);
            }
        });
        
        // 回车搜索
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.search-btn').click();
            }
        });
    </script>
</body>
</html>